<template>
  <div class="my-mian">
    <!-- 个人信息展示框 -->
    <div class="my">
      <div class="my-info">
        <!-- 头像 -->
        <div class="my-img"></div>
        <!-- ip -->
        <div class="my-ip">用户:{{ip}}</div>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="order-list">
      <div class="order-info">中奖记录</div>
      <div class="orders">
        <van-card
          v-for="(item, index) in goodList"
          :key="index"
          :price="item.goodPrice"
          :desc="'中奖日期:'+item.boxDate"
          :title="item.goodName"
          :thumb="item.goodImg"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 调用接口
import {getIpAPI,getWinByIpAPI} from "@/api";
export default {
  data() {
    return {
      ip:"未知",
      goodList:[]
    };
  },
  created(){
    this.init();
  },
  methods: {
    async init(){
      const ip = await getIpAPI();
      this.ip = ip.data.data;
      const good = await getWinByIpAPI();
      this.goodList = good.data.data
    }
  }
};
</script>

<style>
.my-mian {
  position: relative;
  height: 100%;
  width: 100%;
  background: url("../../images/xk.jpg") no-repeat;
  background-size: cover;
}
.my {
  width: 10rem;
  height: 4rem;
  background: url("../../images/tp2.webp") no-repeat;
  background-position: center;
  background-size: cover;
  background-color: red;
  margin: 0 auto;
  position: relative;
  border-radius: 0 0 20% 20%;
}
.my > .my-info {
  width: 7rem;
  height: 1.5rem;
  /* background-color: skyblue; */
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.my > .my-info > .my-img {
  width: 1.65rem;
  height: 100%;
  background: url("../../images/tx.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  /* background-color: blueviolet; */
  border-radius: 50%;
  float: left;
}
.my > .my-info > .my-ip {
  width: 5.35rem;
  height: 100%;
  /* background-color: yellow; */
  padding-left: 10px;
  line-height: 1.5rem;
  font-size: 20px;
  font-weight: 700;
  float: left;
  color: red;
  box-sizing: border-box;
}
.order-list {
  width: 9.5rem;
  background-color: #fff;
  position: absolute;
  left: 0.25rem;
  top: 2.8rem;
  bottom: 0.3rem;
  border-radius: 10px;
}
.order-list > .order-info {
  width: 100%;
  height: 1rem;
  font-size: 16px;
  color: red;
  text-align: center;
  line-height: 1rem;
  font-weight: 700;
  border-bottom: 1px rgb(189, 185, 185) solid;
}
.order-list > .orders {
  width: 100%;
  position: absolute;
  top: 1.2rem;
  bottom: 0rem;
  background-color: #fff;
  overflow-y: auto;
  border-radius: 0 0 10px 10px;
}
</style>